<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script>
        //宽度 window.innerWidth
        // html元素 document.documentElement
        //设置font-size属性 style.font-size
        //匿名函数 会立即执行
        // window.onload () 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法
        (
            function(){
                console.log('动态设置html的字体大小');
                let winWidth = window.innerWidth,
                    oHTML = document.documentElement;
                // console.log(winWidth,oHTML);
                oHTML.style.fontSize=`${winWidth/10}px`;//模板字符串表示方法 字符串加px
                // 动态设置html的字体大小
            }
        ) ()
    </script> -->
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> <!-- 淘宝自适应 -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .row{
            display: flex;
        }
        .col{
            background-color: pink;
            /* width: 70%; */
        } 
        .col:first-child{
            background-color: green;
            /* width: 30%; */
        }
        /* .col-1{width: 1rem;}
        .col-2{width: 2rem;}
        .col-3{width: 3rem;}
        .col-4{width: 4rem;}
        .col-5{width: 5rem;}
        .col-6{width: 6rem;}
        .col-7{width: 7rem;}
        .col-8{width: 8rem;}
        .col-9{width: 9rem;} */ 

        ul,li{
            list-style: none;
        }
        body{
            --tm-PRICE-TEXT-COLOR:#ee0a7c;

        }
        .page__hd img {
        width: 10rem;
    }
    ul.goods {
        padding: 0.133333rem;

    }
    .goods__item {
        display: table;
    }
    .goods__item > .goods__figure,  
    .goods__item > .goods__figcaption {
        display: table-cell;
        padding: 0.16rem 0;
        vertical-align: top;
        background-color: #fff;
    }
    .goods__figure {
        width: 2.4rem;
        height: 2.4rem;
    }
    .goods__figure > img {
        max-width: 100%;
    }
    .goods__item .goods__figcaption {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        position: relative;
        width: 7.4rem;
    }
    .goods__figcaption .goods__title a {
        color: #333;
        line-height: 1.25;
    }
    .goods__figcaption .goods__price {
        padding: 0.15rem 0 0.2rem;
    }
    .goods__figcaption .goods__price small,
    .goods__figcaption .goods__price strong,
    .goods__figcaption .goods__price span{
        display: inline-block;
        vertical-align: middle;
        font-weight: 700;
    }
    .goods__figcaption .goods__price span{
        font-size: 11px;
        background-color: var(--tm-PRICE-TEXT-COLOR);
        border-radius: 0.026667rem;
        padding: .026667em .08rem .013333rem;
        color: #fff;
        margin-right: 0.0667rem; 
    }
    .goods__figcaption .goods__price strong{
        color: var(--tm-PRICE-TEXT-COLOR);
        font-size: 16px;
        margin-right: 0.16rem;
    }
    .goods__figcaption .goods__price small{
        color: var(--tm-PRICE-TEXT-COLOR);
        font-size: 12px;
    }
    .goods__type{
        color: #ff3600;
    }
    .goods__btn{
        font-size: 14px;
        position: absolute;
        width: 2.1333rem;
        height: 0.64rem;
        background-color: var(--tm-PRICE-TEXT-COLOR);
        text-align: center;
        color: #fff;
        font-weight: 700;
        bottom: 0.1333rem;
        right: 0.2rem;
        border-radius: 0.0267rem;
    }
    </style>
</head>
<body>
    <!-- 3-7分布局 flex:3,7;width 30% 70% 3rem 7rem-->
    <!-- <div class="row">
        <div class="col col-3">1</div>
        <div class="col col-7">2</div>
    </div>
    <div class="row">
        <div class="col col-4">4</div>
        <div class="col col-6">6</div>
    </div> -->

    <div class="page">
        <div class="page__hd">
            <h2>
                <img src="http://gw.alicdn.com/mt/TB1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg" alt="">
            </h2>
        </div>
        
        <div class="page__bd">
            <ul class="goods">
                <!-- <li class="goods__item">
                    <a href="#" class="goods__figure">
                        <img src="https://placeimg.com/350/350/people/grayscale" alt="">
                    </a>
                    <div class="goods__figcaption">
                        <div class="goods__title">
                            <a href="#">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093</a>
                        </div>
                        <div class="goods__price">
                            <span>双11价</span>
                            <strong>299.06</strong>
                            <small>满400减100</small> --> <!-- 标签有可取之处，可选 -->
                        <!-- </div>
                        <div class="goods__type">
                            1小时内热卖5885件
                        </div>
                        <a href="#" class="goods__btn">马上抢</a>
                    </div>
                </li> -->
                <!-- <li class="goods__item">
                    <a href="#" class="goods__figure">
                        <img src="https://placeimg.com/350/350/people/grayscale" alt="">
                    </a>
                    <div class="goods__figcaption">
                        <div class="goods__title">
                            <a href="#">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093</a>
                        </div>
                        <div class="goods__price">
                            <span>双11价</span>
                            <strong>299.06</strong>
                            <small>满400减100</small> --> <!-- 标签有可取之处，可选 -->
                        <!-- </div>
                        <div class="goods__type">
                            1小时内热卖5885件
                        </div>
                        <a href="#" class="goods__btn">马上抢</a>
                    </div>
                </li> --><!-- <li class="goods__item">
                    <a href="#" class="goods__figure">
                        <img src="https://placeimg.com/350/350/people/grayscale" alt="">
                    </a>
                    <div class="goods__figcaption">
                        <div class="goods__title">
                            <a href="#">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093</a>
                        </div>
                        <div class="goods__price">
                            <span>双11价</span>
                            <strong>299.06</strong>
                            <small>满400减100</small> --> <!-- 标签有可取之处，可选 -->
                        <!-- </div>
                        <div class="goods__type">
                            1小时内热卖5885件
                        </div>
                        <a href="#" class="goods__btn">马上抢</a>
                    </div>
                </li> --><!-- <li class="goods__item">
                    <a href="#" class="goods__figure">
                        <img src="https://placeimg.com/350/350/people/grayscale" alt="">
                    </a>
                    <div class="goods__figcaption">
                        <div class="goods__title">
                            <a href="#">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093</a>
                        </div>
                        <div class="goods__price">
                            <span>双11价</span>
                            <strong>299.06</strong>
                            <small>满400减100</small> --> <!-- 标签有可取之处，可选 -->
                        <!-- </div>
                        <div class="goods__type">
                            1小时内热卖5885件
                        </div>
                        <a href="#" class="goods__btn">马上抢</a>
                    </div>
                </li> --><!-- <li class="goods__item">
                    <a href="#" class="goods__figure">
                        <img src="https://placeimg.com/350/350/people/grayscale" alt="">
                    </a>
                    <div class="goods__figcaption">
                        <div class="goods__title">
                            <a href="#">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093</a>
                        </div>
                        <div class="goods__price">
                            <span>双11价</span>
                            <strong>299.06</strong>
                            <small>满400减100</small> --> <!-- 标签有可取之处，可选 -->
                        <!-- </div>
                        <div class="goods__type">
                            1小时内热卖5885件
                        </div>
                        <a href="#" class="goods__btn">马上抢</a>
                    </div>
                </li> --><!-- <li class="goods__item">
                    <a href="#" class="goods__figure">
                        <img src="https://placeimg.com/350/350/people/grayscale" alt="">
                    </a>
                    <div class="goods__figcaption">
                        <div class="goods__title">
                            <a href="#">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093</a>
                        </div>
                        <div class="goods__price">
                            <span>双11价</span>
                            <strong>299.06</strong>
                            <small>满400减100</small> --> <!-- 标签有可取之处，可选 -->
                        <!-- </div>
                        <div class="goods__type">
                            1小时内热卖5885件
                        </div>
                        <a href="#" class="goods__btn">马上抢</a>
                    </div>
                </li> --><!-- <li class="goods__item">
                    <a href="#" class="goods__figure">
                        <img src="https://placeimg.com/350/350/people/grayscale" alt="">
                    </a>
                    <div class="goods__figcaption">
                        <div class="goods__title">
                            <a href="#">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093</a>
                        </div>
                        <div class="goods__price">
                            <span>双11价</span>
                            <strong>299.06</strong>
                            <small>满400减100</small> --> <!-- 标签有可取之处，可选 -->
                        <!-- </div>
                        <div class="goods__type">
                            1小时内热卖5885件
                        </div>
                        <a href="#" class="goods__btn">马上抢</a>
                    </div>
                </li> -->
            </ul>
        </div>
        <script>
            const goods=[
    {
        "id": "641565544185",
        "pic": "https://img.alicdn.com/bao/uploaded/i4/1689187437/O1CN01LFwBH024oCDG9vm9E_!!1689187437.jpg_560x840Q50s50.jpg_.webp",
        "title": "鳄鱼男鞋夏季真皮厚底镂空透气防臭软底商务正装德比鞋休闲皮鞋男",
        "price": "158",
        "count": "1000"
    },
    {
        "id":"616602916456",
        "pic": "https://img.alicdn.com/bao/uploaded/i2/2200877014436/O1CN01iCkQ9K1idjXHp7h8g_!!2200877014436.jpg",
        "title": "Lancome/兰蔻法国口红菁纯哑光唇膏196胡萝卜色505苹果红润唇膏",
        "price": "239",
        "count": "2000+"
    },
    {
        "pic":"https://img.alicdn.com/imgextra/i4/2432508853/O1CN01koelto2FGj1e1a5jG_!!0-item_pic.jpg_430x430q90.jpg",
        "title": "【天猫百亿补贴5000元】凯迪拉克 XT6 天猫特别版 指定车型 订金",
        "price":"5000",
        "count":"28"
    },
    {
        "id":"2966545063",
        "pic" :"https://img.alicdn.com/bao/uploaded/i2/2966545063/O1CN017DZFc31nGtwgouMrt_!!2966545063.jpg_560x840Q50s50.jpg_.webp",
        "title" : "8848真皮手机",
        "price" : "29999",
        "count" : "1000"
    },
    {
        "id": "24185684799",
        "pic":"https://img.alicdn.com/imgextra/i2/2653951168/O1CN01Rmw5OO1KUzHUzzmEy_!!2653951168-0-scmitem6000.jpg",
        "title": "农夫山泉饮用天然水4L *4桶整箱装新老包装随机发货",
        "price": "33",
        "count": "82850",
    },
    {
        "id":"184681746",
        "pic":"https://g-search2.alicdn.com/img/bao/uploaded/i4/i4/772287406/O1CN013KY6LY24Zzvat42xi_!!0-item_pic.jpg_580x580Q90.jpg",
        "title":"是你最爱的GitHub文化衫",
        "price":"￥404",
        "count":"200"
    },
    {
        "id":"55375873",
        "pic" : "https://img.alicdn.com/imgextra/i4/6000000003207/TB2oBzbbKySBuNjy1zdXXXPxFXa_!!6000000003207-0-tbvideo.jpg_600x600.jpg",
        "title":"花花公子男鞋夏季男士透气网面网鞋男休闲运动跑步鞋男旅游鞋子男",
        "price":'239',
        "count":280
    }
]
            const goodsEle=document.querySelector('.goods');
            for(let i=0;i<goods.length;i++){
                let item=goods[i];
                goodsEle.innerHTML += `
                <li class="goods__item">
                    <a href="#" class="goods__figure">
                        <img src="${item.pic}" alt="">
                    </a>
                    <div class="goods__figcaption">
                        <div class="goods__title">
                            <a href="#">${item.title}</a>
                        </div>
                        <div class="goods__price">
                            <span>双11价</span>
                            <strong>${item.price}</strong>
                            <small>满400减100</small>
                        </div>
                        <div class="goods__type">
                            1小时内热卖${item.count}件
                        </div>
                        <a href="#" class="goods__btn">马上抢</a>
                    </div>
                </li>
                `
            }
        </script>
    </div>
</body>
</html>